<!DOCTYPE html>
<html lang="zh-CN" style="overflow: hidden;" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{shared/layout.html}">

<head>
    <title th:text="${'登录 - '+ title}"></title>
    <!--主页面-->
    <link href="/admin/hzyAdminUI/css/hzyAdminUI.css" rel="stylesheet"/>
    <!--styles 样式-->
    <style type="text/css">
        #hzy-login {
            background: #f0f2f5 url('/admin/hzyAdminUI/images/login-bg.svg') no-repeat 50%;
        }
    </style>
</head>

<body>

<th:block layout:fragment="body">
    <div id="hzy-login">

        <div class="container-fluid" id="app" v-cloak>
            <div class="row">
                <div class="login-panel shadow-lg">
                    <h1 class="text-center" th:text="${title}"></h1>
                    <div class="container-fluid">
                        <div class="pt-50">
                            <div class="form-group form-material">
                                <label class="col-form-label">帐户名</label>
                                <input type="text" class="form-control" v-model="accountName" placeholder="请输入帐户名">
                            </div>
                            <div class="form-group form-material">
                                <label class="col-form-label">密码</label>
                                <input type="password" class="form-control" v-model="password" placeholder="请输入密码">
                            </div>
                            <!-- <div class="form-group form-material">
                                <label class="col-form-label">验证码</label>
                                <div class="input-group">
                                    <input type="text" class="form-control" name="loginCode" placeholder="请输入验证码">
                                    <div class="input-group-append">
                                        <img class="yzm" src="http://www.suiyu.org.cn/Admin/Login/yzm"
                                            onclick="$(this).attr('src','http://www.suiyu.org.cn/Admin/Login/yzm'+'/'+new Date().getTime());"
                                            width="100" style="height: 29px; border-bottom: 1px solid #e4eaec;">
                                    </div>
                                </div>
                            </div> -->
                            <a class="btn btn-block btn-primary btn-lg mt-60" href="javascript:;"
                               @click="check">登录</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--js 脚本-->
    <script type="text/javascript">
        let app = new Vue({
            el: "#app",
            data: function () {
                return {
                    accountName: 'admin',
                    password: '123456'
                };
            },
            mounted: function () {
                //清除 cookie
                hzyAdmin.delCookie(hzyAdmin.getTokenKey());
            },
            methods: {
                check: function () {
                    if (!this.accountName) {
                        return hzyAdmin.alert("请输入账户名称!");
                    }
                    if (!this.password) {
                        return hzyAdmin.alert("请输入账户密码!");
                    }

                    hzyAdmin.post('/admin/login/check', {
                        accountName: this.accountName,
                        password: this.password,
                        // LoginCode: this.LoginCode
                    }, function (r) {
                        if (r.code !== 1) return;
                        hzyAdmin.setCookie(hzyAdmin.getTokenKey(), r.data.token);
                        window.location = '/admin';
                    });
                }
            }
        });
    </script>
</th:block>
</body>

</html>
